<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AcoreHeng_UI</title>
<link href="./resources/lib/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="./resources/css/style.css" rel="stylesheet" media="screen">
<link href="./resources/css/main.css" rel="stylesheet" media="screen">
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javacript:;">ach_UI</a>
		</div>
		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">个人中心</a></li>
				<li><a href="#">菜单</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown">更多<b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a href="#">菜单</a></li>
						<li><a href="#">菜单</a></li>
						<li><a href="#">菜单</a></li>
						<li class="divider"></li>
						<li><a href="#">菜单</a></li>
						<li class="divider"></li>
						<li><a href="#">菜单</a></li>
					</ul></li>
			</ul>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="用户/应用">
				</div>
				<button type="submit" class="btn btn-primary">搜索</button>
			</form>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">消息</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i>&nbsp;<span>Admin</span><b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a href="#">修改密码</a></li>
						<li><a href="#">个人中心</a></li>
						<li class="divider"></li>
						<li><a href="#">关于</a></li>
					</ul></li>
			</ul>
		</div>
		</div>
	</nav>
	<div class="container">
		<div class="row	layout_down80">
			<div class="col-md-3">
				<div class="sidebar">
					<div class="panel panel-info">
						<div class="panel-heading">应用</div>
						<div class="panel-body ">
	    					<ul id="sideNav" class="nav accordion" data-role="sidenav">
	    					</ul>
	  					</div>
					</div>
				</div>
				
				<div class="sidebar">
					<div class="panel panel-danger">
						<div class="panel-heading">应用</div>
						<div class="panel-body ">
	    					<ul id="sideNav1" class="nav accordion" data-role="sidenav">
	    						<li><a>应用类型</a>
	    							<ul class="nav">
	    								<li><a>应用</a></li>
	    								<li><a>应用</a></li>
	    								<li><a>应用</a></li>
	    								<li><a>应用</a></li>
	    							</ul>
	    						</li>
	    						<li><a>应用类型</a>
	    							<ul class="nav">
										<li><a>应用</a>
											<ul class="nav">
												<li><a>应用</a></li>
												<li><a>应用</a></li>
												<li><a>应用</a></li>
												<li><a>应用</a></li>
											</ul></li>
										<li><a>应用</a></li>
	    								<li><a>应用</a></li>
	    								<li><a>应用</a></li>
	    							</ul>
	    						</li>
	    						<li><a>应用类型</a>
	    							<ul class="nav">
	    								<li><a>应用</a></li>
	    								<li><a>应用</a></li>
	    								<li><a>应用</a></li>
	    								<li><a>应用</a></li>
	    							</ul>
	    						</li>
	    					</ul>
	  					</div>
					</div>
				</div>

			</div>
			<div class="col-md-9" role="main">
				<div class="panel panel-success">
					<div class="panel-heading">首页</div>
					<div class="panel-body ">
						<div id="carousel-example-generic" class="carousel slide"
							data-ride="carousel">
							<!-- Indicators -->
							<ol class="carousel-indicators">
								<!-- <li data-target="#carousel-example-generic" data-slide-to="0"
									class="active"></li>
								<li data-target="#carousel-example-generic" data-slide-to="1"></li>
								<li data-target="#carousel-example-generic" data-slide-to="2"></li> -->
							</ol>

							<!-- Wrapper for slides -->
							<div class="carousel-inner">
								<div class="item active">
									<img
										data-src="holder.js/900x500/auto/#777:#555/text:First slide"
										alt="First slide"
										src="">
								</div>
								<div class="item">
									<img
										data-src="holder.js/900x500/auto/#666:#444/text:Second slide"
										alt="Second slide"
										src="">
								</div>
								<div class="item">
									<img
										data-src="holder.js/900x500/auto/#555:#333/text:Third slide"
										alt="Third slide"
										src="">
								</div>
							</div>

							<!-- Controls -->
							<a class="left carousel-control" href="#carousel-example-generic"
								data-slide="prev"> <span
								class="glyphicon glyphicon-chevron-left"></span>
							</a> <a class="right carousel-control"
								href="#carousel-example-generic" data-slide="next"> <span
								class="glyphicon glyphicon-chevron-right"></span>
							</a>
						</div>
						<blockquote>
						Some default panel content here. Nulla vitae elit libero, a pharetra augue. 
						Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. 
						Pellentesque ornare sem lacinia quam venenatis vestibulum. 
						Nullam id dolor id nibh ultricies vehicula ut id elit.</blockquote>
						<p>1.设置默认参数，同时也可以再插件定义时传入参数覆盖默认值</p>
						<p>5. 初始化函数
						一般的插件会有init初始化函数并在插件的尾部初始化</p>
						<p>
						6. 私有函数、公有函数
						私有函数：插件内使用，函数名使用”_”作为前缀标识</p>
						<p>
						共有函数：可在插件外使用，函数名使用”this.”作为前缀标识，作为插件的一个方法供外部使用</p>
						<p>
						7. return this
						最后返回jQuery对象，便于jQuery的链式操作</p>
					
					</div>
				</div>
			</div>
		
		</div>
	
	</div>
	<footer>
	
	</footer>
	<div id="gotop"></div>
	<script src="./resources/lib/jquery/jquery.js"></script>
	<script src="./resources/lib/bootstrap/js/bootstrap.min.js"></script>
	<script src="./resources//js/custom.js"></script>
	<script src="./resources/js/jquery.accordion.js"></script>
	<script type="text/javascript">
	$(function($){
		var data = [ {
				"icon":"<i class='icon-reorder'></i>",
				"text" : "类型1sasdfafasf",
				"children" : [ {
					"text" : "应用1",
					"url" : "www.baidu.com"
				},{
					"text" : "应用2",
					"url" : "www.baidu.com"
				},{
					"text" : "应用3",
					"url" : "www.baidu.com",
					"children" : [ {
						"text" : "应用2sdfsdfs",
						"url" : "www.baidu.com"
					},{
						"text" : "应用23",
						"url" : "www.baidu.com"
					},{
						"text" : "应用23",
						"url" : "www.baidu.com"
					}]
				}]
			}, {
				"text" : "类型2323",
				"children" : [ {
					"text" : "应用23",
					"url" : "www.baidu.com"
				},{
					"text" : "应用2",
					"url" : "www.baidu.com"
				},{
					"text" : "应用2",
					"url" : "www.baidu.com"
				}]
			}, {
				"text" : "类型3",
				"children" : [ {
					"text" : "应用2",
					"url" : "www.baidu.com"
				},{
					"text" : "应用1",
					"url" : "www.baidu.com"
				},{
					"text" : "应用2",
					"url" : "www.baidu.com"
				}]
			}];
			var $sideNav = $("#sideNav").accordion({"data":data});
			$("#sideNav1").accordion({
				"closedSign": '<i class="glyphicon glyphicon-chevron-right"></i>',
				"openedSign": '<i class="glyphicon glyphicon-chevron-down"></i>',
			});
			console.log($sideNav.accordion("debug", "阿斯蒂芬"));
			//.debug(23);
		});
	</script>
</body>
</html>